<template>
    <div class="container">
       <div class="property">
           this is property
       </div>
       <!-- <div class="detail">
            <div class="config">
                <div class="tabs">
                    <ul>
                        <li v-for="(nav, index) in navList" :key="index" :class="{'active':nav.route === $route.path}">
                            <router-link :to="nav.route">{{ nav.name }}</router-link>
                        </li>
                    </ul>
                </div>
                <div class="tab-item">
                    <router-view></router-view>
                </div>
            </div>
            <div class="activity">
                activity
            </div>
       </div> -->
       <div class="detail">
            <div class="config">
                <div class="tabs">
                    <ul>
                        <li v-for="tab in tabs" 
                            :key="tab" 
                            :class="{'active': currentTab === tab }"
                            v-on:click="currentTab = tab"
                        >
                            {{ tab }}
                        </li>
                    </ul>
                </div>
                <div class="tab-item">
                    <!-- keep-alive 避免重复渲染，操持组件状态 -->
                    <keep-alive>
                        <component v-bind:is="currentTabComponent"></component>
                    </keep-alive>
                </div>
            </div>
            <div class="activity">
                activity
            </div>
       </div>
       
    </div>
</template>

<script>
import Configuration from "./Detail/config";
import Snapshot from "./Detail/snapshot";
import Toubleshooting from "./Detail/troubleshooting";
import Logs from "./Detail/log";

export default {
    data() {
        return {
            currentRoute: '/home/thing/config',
            navList: [
                {
                    name: 'Configuration',
                    route: '/home/thing/config'
                },
                {
                    name: 'Snapshot',
                    route: '/home/thing/snapshot'
                },
                {
                    name: 'Toubleshooting',
                    route: '/home/thing/trouble'
                },
                {
                    name: 'Logs',
                    route: '/home/thing/log'
                }
            ],
            tabs: ["Configuration", "Snapshot", "Toubleshooting", "Logs"],
            currentTab: "Configuration"
        };
    },
    created() {
        console.log(this.$route.path)
    },
    methods: {
       
    },
    components: {
        "tab-configuration": Configuration,
        "tab-snapshot": Snapshot,
        "tab-toubleshooting": Toubleshooting,
        "tab-logs": Logs
    },
    computed: {
        currentTabComponent: function() {
            return "tab-" + this.currentTab.toLowerCase();
        }
    }
};
</script>
<style scoped>
.container {
    width: 100%;
    height: calc(100% - 40px);
}

.property {
    width: 100%;
    height: 40px;
    background-color: rgb(227, 227, 227)
}

.detail {
    display: flex;
    height: 100%;
}

.config {
    flex: 1;
    display: flex;
}

.tabs {
    text-align: center;
    width: 140px;
    background-color: #ccc;
}

.tabs ul>li {
    height: 30px;
    line-height: 30px;
    cursor: pointer;
}

.tab-item {
    flex: 1;
}

.activity {
    width: 200px;
    height: 100%;
    background-color: #dedede;
}

.active {
    background: #ffffff;
}
</style>
